<script setup lang="ts">
import { reactive, inject, ref } from 'vue';
import { ElNotification } from 'element-plus'
import { h } from 'vue'

interface LoginProvider {
    value: boolean;
}
const login = inject<LoginProvider>('login')!;
const input1 = ref('')
const input2 = ref('')
const isLogin = ref(true);
const form = reactive({
    name: '',
    password: '' // 注意这里应该是 password 而不是 passoword
})
const isLoggedIn = inject('isLoggedIn')

const open1 = () => {
    ElNotification({
        title: '注册成功',
        message: h('i', { style: 'color: teal' }, '请速速登录吧~'),
    })

}

const open2 = () => {
    ElNotification({
        title: '登录成功',
        message: h('i', { style: 'color: teal' }, '开始使用吧！'),
    })
    isLoggedIn.value = true
    setTimeout(() => {
        login.value = false;
    }, 1000);
}
const toggleForm = () => {
    isLogin.value = !isLogin.value;
};

// 添加一个响应式变量来检测屏幕宽度
const screenWidth = ref(window.innerWidth);
window.addEventListener('resize', () => {
    screenWidth.value = window.innerWidth;
});
</script>

<template>
    <el-dialog 
        class="contentLogin" 
        v-model="login" 
        :width="screenWidth >= 500 ? '500px' : '90%'"
        top="30vh" 
        :show-close="false">
        <div class="content">
            <div class="top" v-if="isLogin">
                <div class="left">
                    <div class="title">账号登录</div>
                    <el-input v-model="input1" clearable class="input" placeholder="手机号/用户名/邮箱" />
                    <el-input v-model="input2" class="input" type="password" placeholder="密码" show-password />
                    <el-button type="primary" class="button" @click="open2">登录</el-button>
                </div>
                <el-divider style="height: 30vh;" direction="vertical" v-show="screenWidth >= 500" />
                <div class="right" v-show="screenWidth >= 500">
                    <div class="title">微信扫码登录</div>
                    <div style="margin-top: 2vh; border: 1px solid #ccc; padding: 1vh;border-radius: 1vw;">
                        <img class="imagelogin" src="../assets//self.png" alt="好友验证">
                    </div>
                </div>
            </div>
            <div class="top" v-else>
                <div class="left">
                    <div class="title">账号注册</div>
                    <el-input v-model="input1" clearable class="input" placeholder="手机号/用户名/邮箱" />
                    <el-input v-model="input2" class="input" type="password" placeholder="密码" show-password />
                    <el-button type="primary" class="button" @click="open1">注册</el-button>
                </div>
            </div>
            <el-divider />
            <div class="bottom">
                <div class="leftimage">
                    <img src="../assets/weibo.png" alt="微博" class="smmalicon">
                    <img src="../assets/weixin.png" alt="微信" class="smmalicon">
                    <img src="../assets/qq.png" alt="QQ" class="smmalicon">
                </div>
                <div class="righttext" @click="toggleForm">{{ isLogin ? '立即注册' : '立即登录' }}</div>
            </div>
        </div>
    </el-dialog>
</template>

<style scoped>
.contentLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    padding: 0 2vw;
}

.left {
    height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin-right: 1vw;
}

.right {
    height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.title {
    font-size: clamp(18px, 1vw, 30px);
    font-weight: 500;
}

.button {
    margin-top: 5vh;
    width: 100%;
}

.imagelogin {
    width: 14vh;
    height: 14vh;
    min-width: 100px;
    min-height: 100px;
    max-width: 600px;
    max-height: 600px;
}

.input {
    margin-top: 2vh;
}

.bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 2vw;
}

.smmalicon {
    margin-right: 1vw;
}

.righttext {
    font-size: clamp(12px, 1vw, 24px);
    color: #409eff;
    cursor: pointer;
}

@media (max-width:400px) {
    .contentLogin {
        width: 80vw!important;
    }
}
</style>